<template>
  <div id="landView" class="echart-demo" />

</template>
<script setup>
// 引入echart和json数据
import * as echarts from 'echarts'
import 'echarts-gl'
import chongqing from '@/map/json/chongqing.js'
import anhui from '@/map/json/anhui.js'
import beijing from '@/map/json/beijing.js'
import shandong from '@/map/json/shandong.js'
import fujian from '@/map/json/fujian.js'
import ganshu from '@/map/json/ganshu.js'
import guangxi from '@/map/json/guangxi.js'
import guangdong from '@/map/json/guangdong.js'
import guizhou from '@/map/json/guizhou.js'
import hainan from '@/map/json/hainan.js'
import hebei from '@/map/json/hebei.js'
import heilongjiang from '@/map/json/heilongjiang.js'
import henan from '@/map/json/henan.js'
import hubei from '@/map/json/hubei.js'
import hunan from '@/map/json/hunan.js'
import jiangshu from '@/map/json/jiangshu.js'
import jiangxi from '@/map/json/jiangxi.js'
import jilin from '@/map/json/jilin.js'
import liaoning from '@/map/json/liaoning.js'
import neimengu from '@/map/json/neimengu.js'
import ningxia from '@/map/json/ningxia.js'
import qinghai from '@/map/json/qinghai.js'
import shanxi from '@/map/json/shanxi.js'
import shanxi2 from '@/map/json/shanxi2.js'
import sichuan from '@/map/json/sichuan.js'
import taiwan from '@/map/json/taiwan.js'
import tianjin from '@/map/json/tianjin.js'
import xinjiang from '@/map/json/xinjiang.js'
import xizang from '@/map/json/xizang.js'
import yunan from '@/map/json/yunan.js'
import zhejiang from '@/map/json/zhejiang.js'
import shanghai from '@/map/json/shanghai.js'
import maxMap from '@/map/china.js'
const cityList = [
  {
    name: '全国',
    value: maxMap
  },
  {
    name: '重庆市',
    value: chongqing
  },
  {
    name: '安徽省',
    value: anhui
  },
  {
    name: '北京市',
    value: beijing
  },
  {
    name: '山东省',
    value: shandong
  },
  {
    name: '福建省',
    value: fujian
  },
  {
    name: '甘肃省',
    value: ganshu
  },
  {
    name: '广西壮族自治区',
    value: guangxi
  },
  {
    name: '广东省',
    value: guangdong
  },
  {
    name: '贵州省',
    value: guizhou
  },
  {
    name: '海南省',
    value: hainan
  },
  {
    name: '河北省',
    value: hebei
  },
  {
    name: '黑龙江省',
    value: heilongjiang
  },
  {
    name: '河南省',
    value: henan
  },
  {
    name: '湖北省',
    value: hubei
  },
  {
    name: '湖南省',
    value: hunan
  },
  {
    name: '江苏省',
    value: jiangshu
  },
  {
    name: '江西省',
    value: jiangxi
  },
  {
    name: '吉林省',
    value: jilin
  },
  {
    name: '辽宁省',
    value: liaoning
  },
  {
    name: '内蒙古自治区',
    value: neimengu
  },
  {
    name: '宁夏回族自治区',
    value: ningxia
  },
  {
    name: '青海省',
    value: qinghai
  },
  {
    name: '陕西省',
    value: shanxi
  },
  {
    name: '山西省',
    value: shanxi2
  },
  {
    name: '四川省',
    value: sichuan
  },
  {
    name: '台湾省',
    value: taiwan
  },
  {
    name: '天津市',
    value: tianjin
  },
  {
    name: '新疆维吾尔自治区',
    value: xinjiang
  }, {
    name: '西藏自治区',
    value: xizang
  },
  {
    name: '云南省',
    value: yunan
  },
  {
    name: '浙江省',
    value: zhejiang
  },
  {
    name: '上海市',
    value: shanghai
  }
]

import { onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  cityName: {
    type: String,
    default: '重庆市'
  },
  mapList: {
    type: Array,
    default: () => {
      return []
    }
  }
})
watch(() => props.cityName, (n, o) => {
  setOption()
})
watch(() => props.mapList, (n, o) => {
  setOption()
})
// 设置echart数据
const setOption = () => {
  // 获取echart对象
  const dom = document.getElementById('landView')
  if (dom) {
    // 初始化
    const mapEchart = echarts.init(dom)
    // 注册地图
    echarts.registerMap(props.cityName, cityList.filter((item) => {
      return item.name === props.cityName
    })[0].value)
    const option = {
      geo3D: {
        map: props.cityName,
        show: false,
        roam: false,
        top: 0, // 组件的视图离容器四个方向的距离。
        left: 0,
        right: 0,
        bottom: 0,
        layoutCenter: ['30%', '30%'],

        tilt: 95, // 设置平铺角度为 45°
        scaleLimit: { // 设置缩放范围
          min: 1, // 最小缩放比例为1（不能再缩小）
          max: 1 // 最大缩放比例为2（不能再放大）
        },
        label: {
          emphasis: {
            show: false
          }
        }
      },
      series: [
        // 地图信息
        {
          tooltip: {
            trigger: 'item'
          },
          name: '地图点位数据',
          type: 'map3D',
          layoutCenter: ['30%', '30%'],

          map: props.cityName, // 自定义扩展图表类型
          zoom: 1,
          tilt: 95, // 设置平铺角度为 45°
          top: 0, // 组件的视图离容器四个方向的距离。
          left: 0,
          right: 0,
          bottom: 0,
          boxWidth: props.cityName === '山西省' || props.cityName === '北京市' || props.cityName === '天津市' ? 80 : 100,
          // boxDepth: 120,
          // viewControl: {
          //   projection: 'perspective', // 先设置为这个perspective
          //   distance: 120 // 默认缩放比例
          // },
          aspectScale: props.cityName === '重庆市' || props.cityName === '山西省' ? 1 : 0.75, // 这里的值越大，地图就会被拉长
          showLegendSymbol: false, // 存在legend时显示
          regionHeight: 4, // 地图厚度
          // shading: 'shading',
          // light: {
          //   ambient: {
          //     intensity: 1,
          //     alpha: 0,
          //     beta: 0
          //   }
          // },
          label: { // 文字
            show: true,
            color: '#eee',
            fontSize: 13
          },
          itemStyle: { // 地图样式
            color: '#00000020',
            borderColor: '#00B885', // 边框颜色
            borderWidth: 1, // #47DCB2  #00B885
          },
          emphasis: { // 鼠标移入时显示的默认样式
            itemStyle: {
              color: '#00000020',
              borderColor: '#00B885',
              borderWidth: 1
            },
            label: { // 文字
              show: true,
              color: '#fff',
              fontSize: 13
            }
          },
          data: []
        },
        {
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          zlevel: 15,
          symbol: 'circle',
          symbolSize: 30,
          itemStyle: {
            color: '#FB9E32',
            borderWidth: 0,
          },
          data: props.mapList.map((item) => {
            return {
              name: item.cropName,
              farmId: item.farmId,
              value: [item.locationLongitude, item.locationLatitude]
            }
          })
        }
      ]
    }
    // mapEchart.on('click', (params) => {
    //   console.log(params, '==========')
    //   // router.push(`/landDetail?landId=${params.data.name}`)
    // })
    mapEchart.clear()
    // document.getElementById('landView').removeAttribute('_echarts_instance_')
    mapEchart.resize()
    mapEchart.setOption(option, true)

    window.addEventListener('resize', () => {
      mapEchart.resize()
    })
  }
}

onMounted(() => {
  setOption()
})
</script>
<style lang="scss">
.echart-demo {
    width: 100%;
    height: 100%;
    position:absolute;
}
</style>
